<template>
  <div class="w-100 h-100 tzxms">
    <div id="tzxms" style="width: 100%; height: 100%; z-index: 1"></div>

    <div class="center"></div>

    <div class="w-100 h-100 textBox" v-if="current.length">
      <div class="box">
        <div
          class="item"
          v-for="item in [current[0], current[2]]"
          :key="item.name"
        >
          <div class="left">
            <span class="value">{{ item.value }}</span>
            <span class="unit">个</span>
          </div>
          <div class="right">
            <span class="label">{{ item.name }}</span>
            <span class="dot" :style="{background: item.itemStyle.color}"></span>
          </div>
        </div>
      </div>
      <div class="box" >
        <div
          class="item"
          v-for="item in [current[1], current[3]]"
          :key="item.name"
        >
          <div class="left">
            <span class="dot" :style="{background: item.itemStyle.color}"></span>
            <span class="label">{{ item.name }}</span>
          </div>
          <div class="right">
            <span class="value">{{ item.value }}</span>
            <span class="unit">个</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";

var option = {
  backgroundColor: "transparent",
  tooltip: {
    show: false,
  },
  title: {
    text: "123",
    subtext: "项目总数",
    x: "center",
    y: "42%",
    textStyle: {
      fontWeight: "normal",
      fontSize: 20,
      color: "#fff",
    },
    subtextStyle: {
      fontSize: 18,
      color: "#fff",
    },
  },
  legend: {
    show: false,
  },
  toolbox: {
    show: false,
  },
  series: {
    name: "",
    type: "pie",
    radius: [60, 68],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 2,
      shadowBlur: 2,
    },
    label: {
      show: false,
      position: "center",
    },

    labelLine: {
      show: true,
    },
    data: [],
  },
};
let myChart: any;

onMounted(() => {
  console.log(jsonData,'jsonData');
  
  myChart = echarts.init(document.getElementById("tzxms") as HTMLElement);
  myChart.setOption(option);
});

const props = defineProps({
  selectValue: {
    default: 0,
  },
});
const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.jsgl.tzxms;
  } catch (error) {}
  return data;
});

watch(
  () => current.value,
  (val) => {
    if (val) {
      const arr = val.map((item: any) => item.value);
      const all = arr.reduce((pre: number, cur: number) => pre + cur);
      myChart.setOption({
        title: {
          text: all,
        },
        series: [
          {
            data: val,
          },
        ],
      });
    }
  }
);
</script>

<style scoped lang="less">
.tzxms {
  background: url("@/assets/image/jianshe/tzxm.png") no-repeat center center;
  background-size: 100% auto;
  position: relative;
}

.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  width: 140px;
  height: 140px;
  background: #032332;
}
.textBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  left: 0;
  top: 0;
  user-select: none;
}
.box{
  width: 190px;
}
.item{
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: 0 6px;
  display: inline-block;
  vertical-align: middle;
}
.value{
  font-size: 22px;
  font-weight: bold;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  text-shadow: 0px 0px 3px #B8EB8F;
}

</style>
